import {
    CloseCircleOutlined,
    ExclamationCircleOutlined,
  } from '@ant-design/icons';
  import {
    Button,
    Col,
    DatePicker,
    Drawer,
    Form,
    Input,
    message,
    Modal,
    Row,
    Select,
  } from 'antd';
  import moment from 'moment';
  import { useEffect, useState } from 'react';
  import styles from './index.less';
  import Remark from './Remark';
  const { RangePicker } = DatePicker;
  const { TextArea } = Input;
  const { Option } = Select;
    
  const dataMat = 'YYYY/MM/DD';
  const ScheduleCard = (props) => {
    const [form] = Form.useForm();
    const { visible, onCloseVisible } = props;
  
    useEffect(() => {
      
    }, []);
  
    const onClose = () => {
      onCloseVisible(false);
    };

    const save = () => {
      form
        .validateFields()
        .then((values) => {
           let startTime = values.scheduleTime[0].format(dataMat);
           let endTime = values.scheduleTime[1].format(dataMat);
           
           console.log(values, '--values--s', startTime, endTime)
          
           let time = {
            id: 22,
            title: values.scheduleTitle,
            start: new Date(startTime),
            end: new Date(endTime),
          }
          props.refreshEvent(time)
          onCloseVisible(false);
        })
        .catch((errinfo) => {
          console.log(errinfo, '--errinof');
        });
    };
   
    const layout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 18 },
      };
      const labelCol = {
        labelCol: { span: 2 },
        wrapperCol: { span: 21 },
      }
    return (
      <>
        <Drawer
          title="新建日程"
          width={600}
          onClose={onClose}
          visible={visible}
          maskClosable={false}
          bodyStyle={{ paddingBottom: 80 }}
          placement={'right'}
        >
          <Form form={form} {...layout}>
          <Form.Item
                      label={`日程标题`}
                      name={`scheduleTitle`}
                      rules={[{ required: true, message: '请输入日程标题' }]}
                    >
                      <TextArea
                        allowClear
                        autoSize={{ minRows: 1 }}
                        placeholder="日程安排"
                        maxLength={100}
                      />
                    </Form.Item>
                    <Form.Item
                      label={`日程日期`}
                      name={`scheduleTime`}
                      rules={[{ required: true, message: '必填' }]}
                    >
                      <RangePicker style={{width: '100%'}} showTime allowClear/>
                    </Form.Item>
                    <Form.Item
                      label={`重复`}
                      name={`repeat`}
                      initialValue={'0'}
                    >
                      <Select>
                         <Select.Option value='0'>从不重复</Select.Option>
                         <Select.Option value='1'>每天</Select.Option>
                         <Select.Option value='2'>每周</Select.Option>
                         <Select.Option value='3'>每月</Select.Option>
                         <Select.Option value='4'>每年</Select.Option>
                      </Select>
                    </Form.Item>
                    <Form.Item
                      label={`地点`}
                      name={`scheduleAddress`}
                      rules={[{ required: true, message: '请输入地点' }]}
                    >
                      <TextArea
                        allowClear
                        autoSize={{ minRows: 1 }}
                        placeholder="日程安排地点"
                        maxLength={100}
                      />
                    </Form.Item>
                    <Form.Item
                      label={`提醒`}
                      name={`scheduleRemark`}
                    >
                      <Remark></Remark>
                    </Form.Item>
                    <Form.Item
                      label={`描述`}
                      name={`scheduleDestail`}
                      rules={[{ required: true, message: '请输入描述' }]}
                    >
                      <TextArea
                        allowClear
                        autoSize={{ minRows: 1 }}
                        placeholder="日程描述"
                        maxLength={100}
                      />
                    </Form.Item>
          </Form>
          <Row></Row>
          <Row
            style={{
              position: 'absolute',
              width: '690px',
              padding: '20px 0',
              bottom: '0px',
              background: '#ffffff',
              display: 'flex',
              justifyContent: 'center',
            }}
          >
            <Button type="primary" onClick={save} style={{ marginRight: '10px' }}>
              保存
            </Button>
            <Button onClick={onClose} style={{ marginRight: '10px' }}>
              取消
            </Button>
          </Row>
        </Drawer>
      </>
    );
  };
  
  export default ScheduleCard;
  